<template>
  <div>
    <div id="slider">
      <el-carousel :interval="5000"
                   :arrow="carousels.length > 1 ? '' : 'never'"
                   height="380px"
                   :indicator-position="carousels.length > 1 ? '' : 'none'">
        <el-carousel-item v-for="item in carousels" :key="item.path">
          <a :href="item.path" v-if="item.path" target="_blank">
            <img v-lazyload.cdn="item.picturePath" :alt="item.name"/>
          </a>

          <a  v-else>
            <img v-lazyload.cdn="item.picturePath" :alt="item.name"/>
          </a>
        </el-carousel-item>
      </el-carousel>

      <LoginInfo class="loginInfo" :message="newMessage"></LoginInfo>
    </div>


    <section class="container">
      <nav id="t1" style="top: -30px; position: relative"></nav>
      <!--实力商家-->
      <StrengthSeller :data="powers" class="strength"></StrengthSeller>

      <!--1F楼层-->
      <nav id="t2" style="top: -30px; position: relative"></nav>
      <Box :title-name="F1.goodsCategory.goodsCateName" :index="1">
        <nuxt-link slot="actions" :to="{path:'/mall', query:{variety:F1.goodsCategory.goodsCateId}}" target="_blank"
                   class="more">更多
        </nuxt-link>
        <Floor :banner="F1.leftAd" :data="blackMetal"></Floor>
      </Box>

      <!--广告一-->
      <div class="adv" v-if="F1.bottomBanner.length > 0">
        <a v-if="F1.bottomBanner[0].path" :href="F1.bottomBanner[0].path" target="_blank">
          <img v-lazyload.cdn="F1.bottomBanner[0].picturePath" :alt="F1.bottomBanner[0].name">
        </a>

        <a v-else>
          <img v-lazyload.cdn="F1.bottomBanner[0].picturePath" :alt="F1.bottomBanner[0].name">
        </a>
      </div>


      <!--2F楼层-->
      <nav id="t3" style="top: -30px; position: relative"></nav>
      <Box :title-name="F2.goodsCategory.goodsCateName" :index="2">
        <nuxt-link slot="actions"
                   :to="{path:'/mall', query:{variety:F2.goodsCategory.goodsCateId}}"
                   target="_blank"
                   class="more">更多
        </nuxt-link>
        <Floor :banner="F2.leftAd" :data="colourMetal"></Floor>
      </Box>

      <!--广告一-->
      <div class="adv" v-if="F2.bottomBanner.length > 0">
        <a v-if="F2.bottomBanner[0].path" :href="F2.bottomBanner[0].path" target="_blank">
          <img v-lazyload.cdn="F2.bottomBanner[0].picturePath" :alt="F2.bottomBanner[0].name">
        </a>

        <a v-else>
          <img v-lazyload.cdn="F2.bottomBanner[0].picturePath" :alt="F2.bottomBanner[0].name">
        </a>
      </div>

      <!--3F楼层-->
      <nav id="t4" style="top: -30px; position: relative"></nav>
      <Box :title-name="F3.goodsCategory.goodsCateName" :index="3">
        <nuxt-link
          slot="actions"
          :to="{path:'/mall', query:{variety:F3.goodsCategory.goodsCateId}}"
          target="_blank"
          class="more">更多
        </nuxt-link>
        <Floor :banner="F3.leftAd" :data="expensiveMetal"></Floor>
      </Box>

      <!--广告一-->
      <div class="adv" v-if="F3.bottomBanner.length > 0" target="_blank">
        <a v-if="F3.bottomBanner[0].path" :href="F3.bottomBanner[0].path">
          <img v-lazyload.cdn="F3.bottomBanner[0].picturePath" :alt="F3.bottomBanner[0].name">
        </a>

        <a v-else>
          <img v-lazyload.cdn="F3.bottomBanner[0].picturePath" :alt="F3.bottomBanner[0].name">
        </a>
      </div>

      <!--4F楼层-->
      <nav id="t5" style="top: -30px; position: relative"></nav>
      <Box :title-name="F4.goodsCategory.goodsCateName" :index="4">
        <nuxt-link
          slot="actions"
          :to="{path:'/mall', query:{variety:F4.goodsCategory.goodsCateId}}"
          target="_blank"
          class="more">更多
        </nuxt-link>
        <Floor :banner="F4.leftAd" :data="otherMetal"></Floor>
      </Box>

      <!--广告-->
      <div class="adv" v-if="F4.bottomBanner.length > 0">
        <a v-if="F4.bottomBanner[0].path" :href="F4.bottomBanner[0].path" target="_blank">
          <img v-lazyload.cdn="F4.bottomBanner[0].picturePath" :alt="F4.bottomBanner[0].name">
        </a>

        <a v-else>
          <img v-lazyload.cdn="F4.bottomBanner[0].picturePath" :alt="F4.bottomBanner[0].name">
        </a>
      </div>

      <!--采购信息-->
      <Box title-name="采购信息">
        <nuxt-link slot="actions" :to="{path:'/purchase'}" target="_blank" class="more">更多</nuxt-link>
        <Purchase v-for="(purchase, index) in purchases" :purchase="purchase" :key="index"></Purchase>
      </Box>

      <!--特色服务-->
      <Box title-name="特色服务">

        <ul class="tabs clearfix" slot="actions">
          <li :class="{'active': serviceType === 0 }" @click="changeServiceType(0)">供应链金融</li>
          <li :class="{'active': serviceType === 1 }" @click="changeServiceType(1)">物流服务</li>
          <li :class="{'active': serviceType === 2 }" @click="changeServiceType(2)">检测服务</li>
        </ul>

        <!--金融-->
        <Finance v-show="serviceType === 0" :data="gyljr"></Finance>

        <!--物流-->
        <Logistics v-show="serviceType === 1" :data="wlfw"></Logistics>

        <!--检测-->
        <Test v-show="serviceType === 2" :data="jcfw"></Test>
      </Box>

      <!--新闻动态-->
      <nav id="t6" style="top: -30px; position: relative"></nav>
      <Box title-name="聚贸资讯" class="news" type="news">

        <!--幻灯片-->
        <div class="news-silder">
          <el-carousel indicator-position="none" class="slider" arrow="never" height="260px" ref="carousel"
                       :interval="50000" @change="change">
            <el-carousel-item v-for="(item, index) in news.newsArticleVo" v-if="index < 4"
                              :key="item.articleContentId">
              <nuxt-link :to="{path: `/news/${item.articleContentId}`}" target="_blank">
                <img v-lazyload.cdn="item.picture" :alt="item.name" :title="item.name"/>
                <h3 class="title" :title="item.name">{{ item.name }}</h3>
              </nuxt-link>
            </el-carousel-item>
          </el-carousel>

          <ul class="thumbnail">
            <li v-for="(item, index) in news.newsArticleVo"
                v-if="index < 4"
                :class="{'is-active': currentIndex === index}"
                @mouseenter="changeSlider(index)"
                :key="item.articleContentId">
              <a target="_blank">
                <img v-lazyload.cdn="item.picture" :alt="item.name"/>
              </a>
            </li>
          </ul>
        </div>

        <!--行业资讯-->
        <NewsList
          class="industry-news"
          title-name="行业资讯"
          :data="news.industuryArticleVo">
        </NewsList>

        <!--聚贸动态-->
        <NewsList
          class="dynamic-news"
          title-name="推荐资讯"
          :data="news.jumoreArticleVo">
        </NewsList>
      </Box>

      <Toolnav :data="lists"></Toolnav>
    </section>

  </div>
</template>

<script>
  import axios from '~/plugins/axios'
  import address from '~/config'

  import Toolnav from '~/components/Toolnav.vue'

  import Box from '~/components/index/Box.vue'
  import NewsList from '~/components/index/NewsList.vue'
  import Logistics from '~/components/index/Logistics.vue'
  import Finance from '~/components/index/Finance.vue'

  // 实力商家
  import StrengthSeller from '~/components/index/StrengthSeller'

  // 采购信息
  import Purchase from '~/components/index/Purchase.vue'

  // 楼层
  import Floor from '~/components/index/Floor'

  // 检测服务
  import Test from '~/components/index/Test'

  // 登录信息
  import LoginInfo from '~/components/index/LoginInfo'

  // 聚贸平台地址
  import platform from '~/config/platform'

  //  const {result: purchases = [], totalPage = 0} = await

  export default {
    name: 'index',
    data () {
      return {
        serviceType: 0,
        platform: platform,
        address: address,
        currentIndex: 0,
        priceNews: [],
        today: new Date(),
        activeName: 'first',
        lists: [
          {name: '实力商家', target: '#t1'},
          {name: '黑色金属', target: '#t2'},
          {name: '有色金属', target: '#t3'},
          {name: '贵金属矿', target: '#t4'},
          {name: '其他矿产', target: '#t5'},
          {name: '聚贸资讯', target: '#t6'}
        ]
      }
    },

    async asyncData () {
      let cityCode = -1
      const [
        {result: purchases = []},
        newMessage = [],

        news = [],
        carousels = [],
        {F1 = {}, F2 = {}, F3 = {}, F4 = {}, wlfw = [], slsj: power = [], jcfw = [], gyljr = []}
      ] = await Promise.all([
        axios.get('/search/demand', {params: {pageSize: 4}}).then(data => data.data.data),
        //  最新消息
        axios.get('/index/getNewNotice').then(data => data.data.data),


        // 新闻动态
        axios.get('/index/news').then(data => data.data.data),

        // 头部幻灯片
        axios.get('/index/carousel').then(data => data.data.data),

        // 物流需求/特惠线路/热门仓储/金融服务
        axios.get('/index/adlist').then(data => data.data.data || {})

      ])

      // 获取数据
      const [
        blackMetal = [],
        colourMetal = [],
        expensiveMetal = [],
        otherMetal = []
      ] = await Promise.all([
        // 黑色金属矿
        axios.get('/search/goods', {
          params: {
            goodsCategoryGrade1Id: F1.goodsCategory.goodsCateId,
            pageSize: 6,
            sort: 'pressDate DESC'
          }
        }).then(data => data.data.data.result),

        // 有色金属矿
        axios.get('/search/goods', {
          params: {
            goodsCategoryGrade1Id: F2.goodsCategory.goodsCateId,
            pageSize: 6,
            sort: 'pressDate DESC'
          }
        }).then(data => data.data.data.result),

        // 贵色金属矿
        axios.get('/search/goods', {
          params: {
            goodsCategoryGrade1Id: F3.goodsCategory.goodsCateId,
            pageSize: 6,
            sort: 'pressDate DESC'
          }
        }).then(data => data.data.data.result),

        // 其他金属矿
        axios.get('/search/goods', {
          params: {
            goodsCategoryGrade1Id: F4.goodsCategory.goodsCateId,
            pageSize: 6,
            sort: 'pressDate DESC'
          }
        }).then(data => data.data.data.result)
      ])

      // 处理实力商家数据
      let powers = []
      if (Array.isArray(power)) {
        for (let i = 0, length = power.length; i < length - 1; i += 7) {
          powers.push(power.splice(0, 8))
        }
      }

      return {
        newMessage,
        blackMetal,
        purchases,
        colourMetal,
        expensiveMetal,
        otherMetal,
        powers,
        news,
        carousels,
        cityCode,
        F1,
        F2,
        F3,
        F4,
        wlfw,
        jcfw,
        gyljr
      }
    },

    // 监视用户登录
    // 检测到用户登录之后 重新获取采购信息
    watch: {
      async user () {
        if (this.user.userId) {
          this.getPurchase()
        }
      }
    },

    computed: {
      user () {
        return this.$store.state.user.user
      }
    },

    methods: {
      async getPurchase () {
        const {result: purchases = []} = await axios.get('/search/demand', {params: {pageSize: 4}}).then(data => data.data.data)
        this.purchases = purchases
      },
      /**
       * 切换特色服务
       */
      changeServiceType (type) {
        this.serviceType = type
      },
      /**
       * 幻灯片切换回调
       */
      change (index) {
        this.currentIndex = index
      },

      // 登录下方的消息类型切换
      changeNoticeType (index) {
        this.noticeType = index
      },

      /**
       * 切换显示幻灯片
       * @param index Number  幻灯片对应的索引
       */
      changeSlider (index) {
        this.$refs.carousel.setActiveItem(index)
      }
    },
    components: {
      Toolnav,
      Floor,
      Box,
      Purchase,
      Test,
      StrengthSeller,
      NewsList,
      Logistics,
      LoginInfo,
      Finance
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>

  @import "../element-variables";

  .strength{
    margin: 30px 0;
  }
  #slider {
    height: 380px;
    position: relative;
    overflow: hidden;
    width: 100%;

    .el-carousel {
      height: 380px;
      position: absolute;
      left: 0;
      width: 100%;
      top: 0;
    }

    .el-carousel__item {
      text-align: left !important;
    }

    a {
      display: block;
      width: 100%;
    }

    img {
      position: relative;
      left: 50%;
      /*width: 100%;*/
      transform: translateX(-50%);
    }
  }

  .loginInfo {
    width: 240px;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    right: calc((100% - 1190px) / 2);
    background: #fff;
  }

  .news {
    overflow: hidden;

    .content {
      padding: 0;
    }
  }

  .industry-news, .dynamic-news {
    float: left;
    width: 388px;
  }

  .industry-news {
    padding: 0 20px;
  }

  .more {
    line-height: 26px;
  }

  a.more:hover{
    color: $--color-primary;
  }

  // 采购
  .purchase-box.box {
    border-bottom: none;
  }

  .purchase {
    float: left;
  }

  .news-silder {
    width: 410px;
    float: left;
    padding: 10px;

    .slider {
      height: 260px;
      margin-bottom: 10px;
    }

    .title {
      height: 34px;
      line-height: 34px;
      position: absolute;
      left: 0;
      bottom: 0;
      color: #fff;
      width: 100%;
      background-color: rgba(0, 0, 0, .6);
    }

    .thumbnail {
      margin-left: -2px;
      overflow: hidden;

      li {
        margin-left: 2px;
        float: left;
        position: relative;

        a {
          width: 96px;
          height: 64px;
          display: block;
        }

        img {
          width: 100%;
          height: 100%;
        }

        &.is-active a:after {
          content: '';
          left: 0;
          top: 0;
          width: 96px;
          height: 64px;
          border: 2px solid $--color-primary;
          z-index: 2;
          position: absolute;
        }
      }
    }
  }

  .tool-bar {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .adv {
    margin-top: 20px;
    width: 100%;
    height: 90px;
    text-align: center;

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .tabs {
    position: absolute;
    right: 70px;
    width: 310px;
    bottom: -1px;

    li {
      cursor: default;
      width: 102px;
      text-align: center;
      border-bottom: 2px solid transparent;
      float: left;
      color: #6e6e6e;
      font-size: 16px;
      padding-bottom: 12px;

      &.active {
        border-color: $--color-primary;
        color: $--color-primary;
      }
    }
  }
</style>
